// router/index.js

// 首先，确保你已经安装了vue-router
// npm install vue-router@3

import Vue from "vue";
import VueRouter from "vue-router";

// 使用Vue Router
Vue.use(VueRouter);

// 定义路由组件
import MyMusic from "@/views/MyMusic.vue";
import Follow from "@/views/Follow.vue";
import DisCover from "@/views/DisCover.vue";
import ArtList from "@/views/ArtList.vue";
import TopList from "@/views/TopList.vue";
import Recommend from "@/views/Recommend.vue";
import NotFound from "@/views/NotFound.vue";


// 定义路由
const routes = [
  {
    path: "/",
    name: "MyMusic",
    component: MyMusic,
  },
  {
    path: "/MyMusic",
    name: "MyMusic",
    component: MyMusic,
  },
  {
    path: "/Follow",
    name: "Follow",
    component: Follow,
  },
  {
    path: "/DisCover",
    name: "DisCover",
    component: DisCover,
    children: [
      {
        path: "TopList/:name?",
        component: TopList,
      },
      {
        path: "ArtList",
        component: ArtList,
      },
      {
        path: "Recommend",
        component: Recommend,
      },
    ],
  },
  //   {
  //     path: '/user/:id',
  //     name: 'User',
  //     component: User,
  //     // 嵌套路由示例
  //     children: [
  //       {
  //         // 当 /user/:id/profile 匹配成功，
  //         // UserProfile 会被渲染在 User 的 <router-view> 中
  //         path: 'profile',
  //         component: UserProfile
  //       }
  //     ]
  //   },
    // 重定向示例
    {
      path: '/redirect',
      redirect: '/'
    },
    // 404 路由
    {
      path: '*',
      name: 'NotFound',
      component: NotFound
    }
];

// 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  mode: "history", // 使用 HTML5 history 模式
  base: process.env.BASE_URL, // 这个选项在构建时会自动设置
  routes, // 缩写，相当于 routes: routes
});

// 全局前置守卫示例
router.beforeEach((to, from, next) => {
  // 可以在这里进行一些全局的权限检查或其他逻辑
  // 例如，检查用户是否登录
  // if (!isAuthenticated && to.name !== 'Login') {
  //   next({ name: 'Login' })
  // } else {
  //   next()
  // }
  next();
});

// 导出router实例
export default router;
